<template>
  <div class="container">
    <el-row :gutter="32" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="school-card-panel" @click="toSchoolList">
          <div class="img2">
            <img src="@/assets/image/patrol/home/school2.png"/>
          </div>
          <div class="img3">
            <img src="@/assets/image/patrol/home/school3.png"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              学校总数
            </div>
            <div class="card-panel-value">
              {{ schoolCount }}
            </div>
            <div class="img4">
              <img src="@/assets/image/patrol/home/school4.png"/>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="guard-card-panel" @click="toGuardList">
          <div class="img2">
            <img src="@/assets/image/patrol/home/guard2.png"/>
          </div>
          <div class="img3">
            <img src="@/assets/image/patrol/home/guard3.png"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              安保人员数量
            </div>
            <div class="card-panel-value">
              {{ guardCount }}
            </div>
            <div class="img4">
              <img src="@/assets/image/patrol/home/guard4.png"/>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="staff-card-panel" @click="toStaffList">
          <div class="img2">
            <img src="@/assets/image/patrol/home/staff2.png"/>
          </div>
          <div class="img3">
            <img src="@/assets/image/patrol/home/staff3.png"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              行政人员数量
            </div>
            <div class="card-panel-value">
              {{ staffCount }}
            </div>
            <div class="img4">
              <img src="@/assets/image/patrol/home/staff4.jpg"/>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="user-card-panel">
          <div class="img2">
            <img src="@/assets/image/patrol/home/user2.png"/>
          </div>
          <div class="img3">
            <img src="@/assets/image/patrol/home/user3.png"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              今日登录系统用户数
            </div>
            <div class="card-panel-value">
              <span class="small-font">APP:</span>{{ appCount }} <span class="small-font">WEB:</span>{{ webCount }}
            </div>
            <div class="img4">
              <img src="@/assets/image/patrol/home/user4.jpg"/>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="wrapper">
          <div class="title" style="display: flex;align-items: center">
            <div style="flex-grow: 1">
              <img src="@/assets/image/patrol/home/lineV.png">
              <span>待办事项</span>
            </div>
            <div style="color: #4080EB;cursor: pointer" @click="handleMore">
              更多>
            </div>
          </div>
          <div class="list"
               v-if="lineNoDos.length > 0 || formNoFills.length > 0 || dailyformdata>=0 || (securityRisks.total - securityRisks.complete)>0">
            <el-scrollbar style="height:100%;">
              <!--              <template v-for="item in guardNoChecks">-->
              <!--                <div class="list-row">-->
              <!--                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>-->
              <!--                  <div class="things-title">-->
              <!--                    <el-link @click.native="toGuardCheckList(item.guardPhonenumber)">-->
              <!--                      {{ item.schoolName }}安保人员{{ item.guardName }}资料审核-->
              <!--                    </el-link>-->
              <!--                  </div>-->
              <!--                  <div class="things-time">{{ item.createTime }}</div>-->
              <!--                </div>-->
              <!--                <div style="clear: both"></div>-->
              <!--              </template>-->
              <template v-for="item in lineNoDos">
                <div class="list-row">
                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                  <div class="things-title">
                    <el-link @click.native="toLineRecordList(item)">{{ item.schoolName }}学校[{{
                        item.memberName
                      }}]未提交安全巡查记录
                    </el-link>
                  </div>
                  <div class="things-time">{{ item.createTime }}</div>
                </div>
                <div style="clear: both"></div>
              </template>
              <template v-for="item in formNoFills">
                <div class="list-row">
                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                  <div class="things-title">
                    <el-link @click.native="toFormDetail(item)">{{ item.formName }}有{{ item.fillingX }}个学校未提交
                    </el-link>
                  </div>
                  <div class="things-time">{{ item.createTime }}</div>
                </div>
                <div style="clear: both"></div>
              </template>
              <div class="list-row" v-if="dailyformdata>=0">
                <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                <div class="things-title">
                  <el-link @click.native="todailyform()">每日校园安全检查、整改记录表 有{{
                      schoolCount - dailyformdata
                    }}个学校未提交
                  </el-link>
                </div>
                <div class="things-time">{{ parseTime(Date()) }}</div>
              </div>
              <div style="clear: both"></div>
              <div class="list-row" v-if="(securityRisks.total - securityRisks.complete)>=0">
                <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                <div class="things-title">
                  <el-link @click.native="toSecurityRisks()">区域有{{
                      securityRisks.total - securityRisks.complete
                    }}个安全隐患未处理
                  </el-link>
                </div>
                <div class="things-time">{{ parseTime(Date()) }}</div>
              </div>
              <div style="clear: both"></div>
            </el-scrollbar>
          </div>
          <div v-else style="text-align: center;line-height: 200px;color: rgba(0, 0, 0, 0.45);">
            暂无数据
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="wrapper">
          <div class="title">
            <img src="@/assets/image/patrol/home/lineV.png">
            <span>线路、隐患统计</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="8">
              <div class="line-title">
                <img src="@/assets/image/patrol/home/line.png">
                <span>线路总数：</span><span>{{ lineFinishCount + lineNoFinishCount }}</span><span>条</span>
              </div>
              <div class="line-detail">
                <div class="line-finish">
                  <img src="@/assets/image/patrol/home/finish.png">
                  <span>已巡查：{{ lineFinishCount }}条</span>
                </div>
                <div class="line-notfinish">
                  <img src="@/assets/image/patrol/home/notfinish.png">
                  <span>未巡查：{{ lineNoFinishCount }}条</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="8">
              <div class="exception-title">
                <img src="@/assets/image/patrol/home/exception.png">
                <span>异常总数：</span><span>{{ exceptionHandleCount + exceptionNoHandleCount }}</span><span>个</span>
              </div>
              <div class="exception-detail">
                <div class="exception-finish">
                  <img src="@/assets/image/patrol/home/finish.png">
                  <span>已处理：{{ exceptionHandleCount }}个</span>
                </div>
                <div class="exception-notfinish">
                  <img src="@/assets/image/patrol/home/notfinish.png">
                  <span>未处理：{{ exceptionNoHandleCount }}个</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="8">
              <div class="hidden-title">
                <img src="@/assets/image/patrol/home/exception.png">
                <span>隐患总数：</span><span>{{ securityRisks.total }}</span><span>个</span>
              </div>
              <div class="hidden-detail">
                <div class="exception-finish">
                  <img src="@/assets/image/patrol/home/finish.png">
                  <span>已处理：{{ securityRisks.complete }}个</span>
                </div>
                <div class="exception-notfinish">
                  <img src="@/assets/image/patrol/home/notfinish.png">
                  <span>未处理：{{ securityRisks.total - securityRisks.complete }}个</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <div class="notice">
      <div class="notice-title">
        <img src="@/assets/image/patrol/home/lineV.png">
        <span>通知公告</span>
      </div>
      <div class="notice-list" v-if="notifications.length > 0">
        <el-scrollbar style="height:100%;">
          <el-row style="margin-top: 10px;margin-right: 20px;" v-for="item in notifications" :key="item.id">
            <el-col :span="8">
              <span style="font-size: 12px"><el-link
                @click.native="toNotificationDetail(item.id)">{{ item.title }}</el-link></span>
            </el-col>
            <el-col :span="8" align="center">
              <img src="@/assets/image/patrol/home/finish.png"
                   style="vertical-align: middle;margin-right: 5px;width: 5px;">
              <span style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">已读{{ item.readYes }}</span>
              <span style="color: rgba(0, 0, 0, 0.45);margin-right: 10px;margin-left: 10px;font-size: 12px;"> / </span>
              <img src="@/assets/image/patrol/home/notfinish.png"
                   style="vertical-align: middle;margin-right: 5px;width: 5px;">
              <span style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">未读{{ item.readNo }}</span>
            </el-col>
            <el-col :span="8" align="right">
              <span style="color: rgba(0, 0, 0, 0.45); font-size: 12px;">{{ item.publishTime }}</span>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
      <div v-if="notifications.length <= 0" style="text-align: center;line-height: 150px;color: rgba(0, 0, 0, 0.45);">
        暂无数据
      </div>
    </div>


  </div>
</template>

<script>
import {getSchoolCount} from '@/api/patrol/school'
import {getGuardCount} from '@/api/patrol/guard'
import {getStaffCount} from '@/api/patrol/staff'
import {getLoginCount} from '@/api/monitor/logininfor'
import {listNotification} from '@/api/patrol/notification'
import {listGuardNoCheck} from '@/api/patrol/guard'
import {getStatisticsSchedule, getStatisticsSiteRecord, listUndoneSchedule} from "@/api/patrol/statistics";
import {listFormNoPage} from "@/api/patrol/form";
import {getDailyformInt} from "@/api/patrol/daily";
import {total} from "@/api/patrol/reporting";


export default {
  name: 'Index',
  data() {
    return {
      schoolCount: 0,
      guardCount: 0,
      staffCount: 0,
      appCount: 0,
      webCount: 0,
      notifications: [],
      guardNoChecks: [],
      lineNoDos: [],
      formNoFills: [],
      lineFinishCount: 0,
      lineNoFinishCount: 0,
      exceptionHandleCount: 0,
      exceptionNoHandleCount: 0,
      securityRisks: {},
      dailyformdata: 0
    };
  },
  created() {
    this.getSchoolCount();
    this.getGuardCount();
    this.getStaffCount();
    this.getLoginCount();
    this.getNotifications();
    this.getGuardNoCheck();
    this.getStatisticsSchedule();
    this.getStatisticsSiteRecord();
    this.getUndoList();
    this.getFormNoFills();
    this.getDailyformInt();
    this.getTotal();
  },
  methods: {
    getTotal() {
      total().then(require => {
        this.securityRisks = require.data
      })
    },
    getSchoolCount() {
      getSchoolCount().then(response => {
        this.schoolCount = response.schoolCount;
      });
    },
    getGuardCount() {
      getGuardCount().then(response => {
        this.guardCount = response.guardCount;
      });
    },
    getStaffCount() {
      getStaffCount().then(response => {
        this.staffCount = response.staffCount;
      });
    },
    getLoginCount() {
      getLoginCount().then(response => {
        this.appCount = response.appCount;
        this.webCount = response.webCount;
      });
    },
    getNotifications() {
      listNotification({
        pageNum: 1,
        pageSize: 4
      }).then(response => {
        this.notifications = response.rows.filter(item => item.status === '0');
      });
    },
    getGuardNoCheck() {
      listGuardNoCheck().then(rows => {
        this.guardNoChecks = rows;
      });
    },
    getStatisticsSchedule() {
      getStatisticsSchedule().then(rows => {
        this.lineFinishCount = rows.data.finishedCount;
        this.lineNoFinishCount = rows.data.unfinishedCount;
      });
    },
    getStatisticsSiteRecord() {
      getStatisticsSiteRecord().then(rows => {
        this.exceptionHandleCount = rows.data.handledCount;
        this.exceptionNoHandleCount = rows.data.unHandleCount;
      });
    },
    getUndoList() {
      listUndoneSchedule().then(rows => {
        this.lineNoDos = rows;
      });
    },
    getFormNoFills() {
      listFormNoPage().then(rows => {
        this.formNoFills = rows;
      });
    },
    getDailyformInt() {
      getDailyformInt().then(rows => {
        this.dailyformdata = rows;
      });
    },
    /**
     * 待办事项【更多】跳转
     */
    handleMore() {
      this.$router.push({
        path: '/district/more',
      })
      // this.$router.push("/more");
      // this.$router.push("/form/viewschool/" + item.id);
    },
    toNotificationDetail(id) {
      // this.$tab.openPage("通知公告", "/system/notification", {
      //   isOuter: true,
      //   title: title
      // });
      this.$router.push({
        name: 'NotifyDetail',
        path: "/notification/detail",
        query: {
          id: encodeURI(JSON.stringify(id))
        }
      });
    },
    toGuardCheckList(guardPhonenumber) {
      this.$tab.openPage("安保人员", "/basic/guard/check", {
        isOuter: true,
        guardPhonenumber: guardPhonenumber
      });
    },
    toLineRecordList(item) {
      if (item.type === 'guard') {
        // this.$tab.openPage("巡查记录", "/patrol/line_record", {
        //   isOuter: true,
        //   scheduleDate: item.scheduleDate,
        //   lineId: item.lineId
        // });
        this.$router.push({
          path: '/patrol/detail',
          query: {
            scheduleId: item.scheduleId,
            lineName: item.lineName,
            schoolName: item.schoolName,
            memberName: item.memberName
          },
        })
      } else {
        // this.$tab.openPage("巡查记录", "/patrol/record_staff", {
        //   isOuter: true,
        //   scheduleDate: item.scheduleDate,
        //   lineId: item.lineId
        // });
        this.$router.push({
          path: '/patrol/record/staff',
          query: {
            scheduleId: item.scheduleId,
            lineName: item.lineName,
            schoolName: item.schoolName,
            memberName: item.memberName
          },
        })
      }
    }, todailyform() {
      this.$router.push({
        path: '/form/daily/5',
      })
    },
    toSecurityRisks() {
      this.$router.push({
        path: '/patrol/reporting',
      })
    },
    toSchoolList() {
      this.$tab.openPage("学校信息", "/basic/school");
    },
    toGuardList() {
      this.$tab.openPage("安保人员", "/basic/guard/check", {
        isOuter: true
      });
    },
    toStaffList() {
      this.$tab.openPage("行政人员", "/basic/staff/check");
    },
    toFormDetail(item) {
      this.$router.push("/form/viewschool/" + item.id);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 35px);

  .notice {
    height: 220px;
    background: #fff;
    padding: 16px 50px 16px 16px;
    margin-bottom: 32px;

    .notice-title {
      margin-bottom: 20px;

      span {
        font-weight: bold;
        font-size: 18px;
      }

      img {
        height: 18px;
        vertical-align: bottom;
        margin-right: 10px;
      }
    }

    .notice-list {
      height: 200px;
    }
  }

  .wrapper {
    background: #fff;
    padding: 16px 16px 16px;
    margin-bottom: 10px;

    .title {
      margin-bottom: 20px;

      span {
        font-weight: bold;
        font-size: 18px;
      }

      img {
        height: 18px;
        vertical-align: bottom;
        margin-right: 10px;
      }
    }


    .line-title {
      height: 50px;
      line-height: 50px;
      background: #4080EB;
      border-radius: 5px 5px 0px 0px;
      color: white;

      img {
        width: 30px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 20px;
      }
    }

    .line-detail {
      height: 150px;
      line-height: 40px;
      background: #E4F1FF;
      border-radius: 10px;

      .line-finish {
        margin-left: 10px;
        padding-top: 20px;
      }

      .line-notfinish {
        margin-left: 10px;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .exception-title {
      height: 50px;
      line-height: 50px;
      background: #00BA92;
      border-radius: 5px 5px 0px 0px;
      color: white;

      img {
        width: 30px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 20px;
      }
    }

    .hidden-title {
      height: 50px;
      line-height: 50px;
      background: rgba(186, 0, 37, 0.8);
      border-radius: 5px 5px 0px 0px;
      color: white;

      img {
        width: 30px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 20px;
      }
    }

    .exception-detail {
      height: 150px;
      line-height: 40px;
      background: #DCFFF0;
      border-radius: 10px;

      .exception-finish {
        margin-left: 10px;
        padding-top: 20px;
      }

      .exception-notfinish {
        margin-left: 10px;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .hidden-detail {
      height: 150px;
      line-height: 40px;
      background: rgba(186, 0, 37, 0.16);
      border-radius: 10px;

      .exception-finish {
        margin-left: 10px;
        padding-top: 20px;
      }

      .exception-notfinish {
        margin-left: 10px;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .list {
      height: 200px;
      margin-top: 20px;

      .list-row {
        margin-top: 10px;
        margin-right: 20px;

        .things-img {
          float: left;

          img {
            height: 20px;
          }
        }

        .things-title {
          float: left;
          margin-left: 10px;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
        }

        .things-time {
          float: right;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
        }
      }
    }
  }

  .panel-group {
    background-color: white;
    margin-bottom: 10px;
    padding-top: 30px;
    margin-left: 0px !important;
    margin-right: 0px !important;

    .card-panel-col {
      margin-bottom: 30px;
    }

    .school-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      border-radius: 10px;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/school1.png");

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        padding: 28px;
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 110px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;
        }
      }
    }

    .guard-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      border-radius: 10px;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/guard1.png");

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        padding: 28px;
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 110px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;
        }
      }
    }

    .staff-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      border-radius: 10px;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/staff1.jpg");

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        padding: 28px;
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 110px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;
        }
      }
    }

    .user-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      border-radius: 10px;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/user1.jpg");

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        top: 35px;
        left: 25px;

        img {
          width: 60px;
        }
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 100px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;

          .small-font {
            color: rgba(0, 0, 0, 0.45);
            font-size: 10px;
          }
        }
      }
    }

  }
}

</style>
